<template>
	<view class="swiper-details">
		<view class="bg"><img src="https://domestic-rongchuang.oss-cn-beijing.aliyuncs.com/home/images/banner.png" /></view>
		<view class="cont_bg">
			<view class="title">
				<view class="titleR">员工认证</view>
				<view class="employee">Employee</view>
				<view class="employee">Certification</view>
			</view>
			<view class="person">
				<view class="mine_box">
					<view class="mine_item">
						<view class="mine_item_label"><text class="text">姓名</text></view>
						<view class="mine_item_value"><input placeholder="请输入真实姓名" v-model="userName" placeholder-class="placeholder" maxlength="15" /></view>
					</view>
				</view>
			</view>
			<view class="text_bg">
				<view class="employee-info">员工信息</view>
				<view class="text-area">
					<big-text
						:maxLength="50"
						v-model="staffInfo"
						:height="200"
						placeholder="请输入“组织/区域/部门/岗位/新融E手机号”, 示例：融创集团/华北区域/物业管理部/管家/13xxxx5678"
					></big-text>
				</view>
			</view>

			<button @click="saveHandle" :disabled="userInfo.approvalStatus === '1' || userInfo.approvalStatus === '2'">提交认证</button>
		</view>
	</view>
</template>

<script>
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import BigText from '@/components/big-text/index.vue';
import {mapState} from 'vuex'
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	components: {
		BigText
	},
	mounted() {
		this.$store.dispatch('getLoginUserInfo')
	},
	computed: {
		...mapState({userInfo: state => state.userInfo})
	},
	data() {
		const userInfo = { ...this.$store.state.userInfo };
		return {
			staffInfo: userInfo.staffInfo || '',
			userName: userInfo.nickName || '',
			approvalStatus: userInfo.approvalStatus
		};
	},
	onLoad() {
		uni.loadFontFace({
			family: 'hanyi',
			source: 'url("https://domestic-rongchuang.oss-cn-beijing.aliyuncs.com/home/images/HYQiHei-45S.otf")',
			success() {}
		});
		uni.loadFontFace({
			family: 'Myriad',
			source: 'url("https://domestic-rongchuang.oss-cn-beijing.aliyuncs.com/home/images/MyriadVariableConcept-Italic.otf")',
			success() {}
		});
	},
	methods: {
		saveHandle(option) {
			const { userName, staffInfo } = this;
			if (!userName) {
				uni.showToast({
					title: '请输入员工真实姓名',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (!staffInfo) {
				uni.showToast({
					title: '请输入员工认证信息',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			http('/api/cusUserInfo/submitAuth', {
				method: 'PUT',
				data: {
					userName,
					staffInfo
				}
			}).then(result => {
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				});
				this.$store.dispatch('getLoginUserInfo');
				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
						animationType: 'pop-out',
						animationDuration: 200
					});
				}, 1000);
			});
		}
	}
};
</script>

<style lang="less" scoped>
.swiper-details {
	text-align: center;
	padding-bottom: 32rpx;
	position: relative;
	.bg {
		img {
			width: 100%;
			height: 416rpx;
		}
	}

	.cont_bg {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0px 4px 10px rgba(102, 100, 93, 0.75);
		padding-bottom: 52rpx;
		// position: absolute;
		// left: 28rpx;
		// right: 28rpx;
		// top: 384rpx;
		// margin-bottom: 36rpx;
		position: relative;
		margin: -20rpx 28rpx 0 28rpx;
		.title {
			margin-bottom: 62rpx;
			overflow: hidden;
			.titleR {
				font-size: 50rpx;
				color: #1b1913;
				margin-top: 98rpx;
				text-align: center;
				font-family: 'hanyi';
				font-style: italic;
				margin-bottom: 28rpx;
			}
			.employee {
				font-family: 'Myriad';
				font-size: 32rpx;
				color: #9c9d9d;
			}
		}
	}

	.tips {
		font-size: 28rpx;
		font-weight: 400;
		color: #66645d;
		line-height: 40rpx;
	}

	.text-area {
		text-align: left;
		border-radius: 12rpx;
		margin: 0 28rpx;
		padding: 23rpx 0rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #66645d;
		line-height: 40rpx;
		background-color: #ffffff;
		width: calc(100% - 56rpx);
	}

	button {
		margin: 101rpx 32rpx 0 32rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #66645d;
		background: #facc6b;
		border-radius: 12rpx;
		color: #fff;
		&[disabled] {
			background-color: #f1f1f1 !important;
			color: #ccc !important;
		}
	}
}

.mine_box {
	margin-bottom: 23rpx;
	.mine_item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90rpx;
		margin: 0 28rpx;
		border: 1px solid rgba(198, 199, 199, 0.4);
		border-radius: 20rpx;
		padding: 0 40rpx;
		// &::after {
		// 	content: '';
		// 	position: absolute;
		// 	transform: scaleY(0.5);
		// 	bottom: 0;
		// 	left: 0;
		// 	right: 0;
		// 	height: 1px;
		// 	box-sizing: border-box;
		// 	background: rgba(102, 100, 90, 0.1);
		// }
		.mine_item_label {
			.text {
				font-size: 30rpx;
				color: #727171;
				font-weight: 400;
			}
		}

		.mine_item_value {
			color: #c6c7c7;
			font-size: 30rpx;
			flex-grow: 1;
			justify-content: flex-end;
			text-align: right;
		}
	}
}
.text_bg {
	border: 1px solid rgba(198, 199, 199, 0.4);
	border-radius: 20rpx;
	margin: 28rpx 32rpx 0 32rpx;
}
.employee-info {
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #66645d;
	line-height: 42rpx;
	padding: 0 28rpx;
	margin: 23rpx 0 12rpx 0;
	text-align: left;
}
.placeholder {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8a8c8d;
	line-height: 40rpx;
}
</style>
